<template>
  <BaseLayout>
    <template #content>
      <div v-if="userState.getUserRoles?.includes(role.customer_service)">
        <div class="header">
          <el-date-picker
            v-model="params.recordTime"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="large"
          />

          <el-button
            type="primary"
            style="margin-left: 20px"
            @click="getReportTable"
          >
            查询
          </el-button>
        </div>

        <el-table
          :data="tableData"
          border
          fit
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="日志编号"
            align="center"
            show-overflow-tooltip
          />

          <el-table-column
            prop="userId"
            label="用户编号"
            align="center"
            show-overflow-tooltip
          />

          <el-table-column
            prop="reportId"
            label="举报编号"
            align="center"
            show-overflow-tooltip
          />

          <el-table-column
            prop="createTime"
            label="记录时间"
            align="center"
            :formatter="formatTime"
            show-overflow-tooltip
          />
        </el-table>

        <Pagination
          style="margin-top: 20px"
          :total="total"
          v-model:page="params.pageNo"
          v-model:limit="params.pageSize"
          @pagination="getReportTable"
        />
      </div>

      <div v-else-if="userState.getUserRoles?.includes(role.audit_admin)">
        <div class="header">
          <el-date-picker
            v-model="params.recordTime"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="large"
          />

          <el-button
            type="primary"
            style="margin-left: 20px"
            @click="getVideoAuditTable"
          >
            查询
          </el-button>
        </div>

        <el-table
          :data="tableData"
          border
          fit
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="日志编号"
            align="center"
            show-overflow-tooltip
          />

          <el-table-column
            prop="userId"
            label="用户编号"
            align="center"
            show-overflow-tooltip
          />

          <el-table-column
            prop="videoId"
            label="视频编号"
            align="center"
            show-overflow-tooltip
          />

          <el-table-column
            prop="createTime"
            label="记录时间"
            align="center"
            :formatter="formatTime"
            show-overflow-tooltip
          />
        </el-table>

        <Pagination
          style="margin-top: 20px"
          :total="total"
          v-model:page="params.pageNo"
          v-model:limit="params.pageSize"
          @pagination="getVideoAuditTable"
        />
      </div>

      <div v-else>
        <el-alert
          title="抱歉，您没有权限访问该页面"
          type="error"
          :closable="false"
          style="margin-bottom: 20px"
        />
      </div>
    </template>
  </BaseLayout>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { role } from '@/utils/globalOptions'
import { reactive } from 'vue'
import { getReportLogPage } from '@/api/reportLog'
import dayjs from 'dayjs'
import { getVideoAuditLogPage } from '@/api/videoLog'

const userState = useUserStore()

const tableData = ref<any[]>([])
const params = reactive({
  recordTime: [],
  pageNo: 1,
  pageSize: 10
})
const total = ref(0)

onMounted(async () => {
  if (userState.getUserRoles?.includes(role.customer_service)) {
    await getReportTable()
  } else if (userState.getUserRoles?.includes(role.audit_admin)) {
    await getVideoAuditTable()
  }
})

const getReportTable = async () => {
  const res = await getReportLogPage(params)
  tableData.value = res.list
  total.value = res.total
}

const getVideoAuditTable = async () => {
  const res = await getVideoAuditLogPage(params)
  tableData.value = res.list
  total.value = res.total
}

const formatTime = (_row, _col, callValue) => {
  if (!callValue) {
    return ''
  }

  return callValue ? dayjs(callValue).format('YYYY-MM-DD HH:mm:ss') : '-'
}
</script>

<style scoped lang="scss">
.header {
  margin-bottom: 20px;
}
</style>
